<template>
	<view class="page_box">
		<u-navbar :is-back="true" title=" " v-if="1" :border-bottom="false"></u-navbar>

		<view class="content_box ">
			<view class="swiper-banner">
				<u-swiper :list="imglist" mode="number" indicator-pos="bottomRight" height="464"></u-swiper>
			</view>
			<view class="usrInfo-content flex justify-between align-end">
				<view class="flex align-end overflow" style="width: 70%;">
					<view class="user-avatar">
						<image class="img" src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_alk.png" mode="aspectFill"></image>
					</view>
					<view class="userinfo-ditail">
						<view class="f32 text-bold">玛卡巴卡</view>
						<view class="text-tipc">从业10年|作品数12|四川</view>
					</view>
				</view>
				<navigator url="./designer" hover-class="none" class="flex align-center">
					<text class="text-tipc">全部作品</text>
					<i class="text-tipc cuIcon-right"></i>
				</navigator>
			</view>
			<view class="usertext-content content-border">
				<view class="f34">黑暗骑士·北欧日式民宿</view>
				<view class="flex align-center" style="margin-top: 25rpx;">
					<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_address.png" style="width: 16rpx;height: 22rpx;"></image>
					<text class="text-tipc">成都市金牛区万达广场</text>
				</view>
				<view class="detail-list">
					<view class="list-item flex align-center">
						<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_fx.png" style="width: 23rpx;height: 23rpx;"></image>
						<text class="f24" style="margin-left: 10rpx;">房间：次卧</text>
					</view>
					<view class="list-item flex align-center">
						<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_mj.png" style="width: 24rpx;height: 25rpx;"></image>
						<text class="f24" style="margin-left: 10rpx;">面积：70m²</text>
					</view>
					<view class="list-item flex align-center">
						<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_fg.png" style="width: 28rpx;height: 26rpx;"></image>
						<text class="f24" style="margin-left: 10rpx;">风格：现代简约</text>
					</view>
					<view class="list-item flex align-center">
						<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_ys.png" style="width: 25rpx;height: 25rpx;"></image>
						<text class="f24" style="margin-left: 10rpx;">预算：12万</text>
					</view>
					<view class="list-item flex align-center">
						<image src="https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/ico_lx.png" style="width: 26rpx;height: 24rpx;"></image>
						<text class="f24" style="margin-left: 10rpx;">类型：局部装</text>
					</view>
				</view>
			</view>
			<view class="content-border padding detail-content">
				<view class="flex justify-between" style="margin: 15rpx 0 50rpx;">
					<text class="f30">预约信息</text>
					<text style="font-size: 26rpx;color: #999999;">请认真填写以下预约信息</text>
				</view>
				<u-form :model="form" ref="uForm">
					<u-form-item label="姓名：" left-icon="account" label-width="200" prop="name">
						<u-input v-model="form.name" placeholderStyle="font-size:24rpx;color:#B2B2B2" />
					</u-form-item>
					<u-form-item label="联系方式：" left-icon="phone" label-width="200" prop="tel">
						<u-input v-model="form.tel" placeholderStyle="font-size:24rpx;color:#B2B2B2" />
					</u-form-item>
					<u-form-item label="支付方式：" left-icon="rmb" label-width="200">
						<u-radio-group v-model="form.pay_theWay">
							<u-radio
								v-for="(item, index) in radiolist"
								:key="index"
								:name="item"
								label-size="28"
								active-color="#FFB81E"
							>
								{{ item }}
							</u-radio>
						</u-radio-group>
					</u-form-item>
				</u-form>
				<!-- 提示 -->
				<view class="tipc-content flex align-start">
					<view class="f28">温馨提示：</view>
					<view class="text-tipc">
						<view>1、预约看房需支付房主98元展示费</view>
						<view>2、支付后未成功看房平台会退还看房展示费用</view>
						<view>3、成功预约后平台将会与您来电，请留意接听</view>
					</view>
				</view>
				
			</view>
			
			
			<view class="bottom-bar flex align-center justify-between padding">
				<view class="yykf-btn" @click="toPay">￥98立即支付</view>
			</view>
		</view>

		<yy-login v-if="vuex_login"></yy-login>
		<yy-loading text="加载中.." mask="true" click="true" ref="loading"></yy-loading>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			imglist: [
				"https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/banner.png",
				"https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/banner.png"
			],
			form:{
				name:'',
				tel:'',
				pay_theWay:'微信'
			},
			radiolist: ["微信","钱包"],
			rules: {				
				name: [
					{
						required: true, 
						message: '输入您的姓名', 
						trigger: 'blur'
					}
				],
				tel: [
					{ 
						required: true, 
						message: '请输入手机号', 
						trigger: ['blur'],
					},
					{
						validator: (rule, value, callback) => {
							return this.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['blur'],
					}
				],
			},
		};
	},
	onReady() {
		this.$refs.uForm.setRules(this.rules);
	},
	onLoad(){},
	onShow() {},
	methods: {
		toPay(){
			this.$refs.uForm.validate(valid => {
				if (valid) {
					console.log(this.form);
					uni.navigateTo({
						url:'../pay/pay'
					})
				}
			});
		},
	}
};
</script>

<style lang="scss" scoped>
.content_box {
	/deep/.u-form-item--left {
		width: 20% !important;
	}
	.swiper-banner {
		position: relative;
	}
	.usrInfo-content {
		position: relative;
		padding: 30rpx 30rpx 30rpx 174rpx;
		.user-avatar {
			width: 120rpx;
			height: 120rpx;
			border-radius: 50%;
			overflow: hidden;
			border: 4rpx solid white;
			box-sizing: border-box;
			position: absolute;
			left: 30rpx;
			top: -30rpx;
			.img {
				width: 100%;
				height: 100%;
			}
		}
		.text-tipc {
			color: #717171;
			font-size: 24rpx;
			margin-top: 24rpx;
		}
	}
	.detail-content {
		padding-bottom: 200rpx;
	}
	.usertext-content {
		padding: 30rpx;
		.text-tipc {
			color: #999999;
			font-size: 24rpx;
			margin-left: 10rpx;
		}
		.detail-list {
			margin-top: 50rpx;
			.list-item {
				width: 33.33%;
				float: left;
				padding-left: 10rpx;
				margin-bottom: 30rpx;
			}
		}
	}	
	.bottom-bar {
		position: fixed;
		width: 100%;
		bottom: 0;
		left: 0;
		background: white;
		padding: 10rpx 30rpx 50rpx;
		z-index: 99;
		.yykf-btn {
			height: 78rpx;
			line-height: 78rpx;
			background: #4a515b;
			border-radius: 39px;
			color: white;
			text-align: center;
			width: 100%;
			font-size: 30rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
		}
	}
	.tipc-content{
		margin-top: 56rpx;
		.text-tipc{
			font-size: 26rpx;
			color: #999999;			
		}
		.text-tipc > view{
			margin-bottom: 10rpx;
		}
	}
}
</style>
